<template>
  <div class="authority">
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true">
        <el-form-item label="行政区划">
          <el-cascader style="width: 90%" :options="areaList" :props="props1" v-model="searchPids"
            @change="searchAreaChange" />
        </el-form-item>
        <el-form-item label="单位名称">
          <el-input v-model="searchInfo.unitName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="超标情况">
          <el-select v-model="searchInfo.exceed" placeholder="请选择">
            <el-option v-for="item in cbList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="onSubmit">
            查询
          </el-button>
          <el-button icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box unit">
      <div class="gva-btn-list">
        <div>
          <span style="margin-right: 30px;">
            办公室用房使用面积合计:<span style="margin: 0 4px;color: #508ee5;font-weight: bold;">{{ yfInfo.realArea
            }}</span>平方米</span>
          <span>
            核定办公室用房使用面积合计:<span style="margin: 0 4px;color: #508ee5;font-weight: bold;">{{ yfInfo.approveArea
            }}</span>平方米</span>
        </div>
      </div>
      <div class="ant-alert-info">
        <el-popover placement="left-start" :width="350" trigger="click" transition='el-zoom-in-left'>
          <div class="pop-content">
            <div class="pop-title">自定义列</div>
            <div class="check-list">
              <el-checkbox-group v-model="checkedColumns" @change="handleColumnsChange">
                <el-checkbox v-for="column in columns" :value="column" :label="column"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <template #reference>
            <div class="anticon">
              <el-icon size="16" color="#1890ff">
                <Setting />
              </el-icon>
              <div style="margin-left: 2px;">自定义列</div>
            </div>
          </template>
        </el-popover>
      </div>
      <el-table :data="tableData" row-key="id">
        <el-table-column type="index" label="序号" width="100" v-if="checkedColumns.includes('序号')" />
        <el-table-column align="left" label="单位名称" prop="name" v-if="checkedColumns.includes('单位名称')"></el-table-column>
        <el-table-column align="left" label="办公室用房使用面积" prop="realArea"
          v-if="checkedColumns.includes('办公室用房使用面积')"></el-table-column>
        <el-table-column align="left" label="核定办公室用房使用面积" prop="approveArea" width="240"
          v-if="checkedColumns.includes('核定办公室用房使用面积')"></el-table-column>
        <el-table-column align="left" label="超标面积" prop="exceedArea"
          v-if="checkedColumns.includes('超标面积')"></el-table-column>
        <el-table-column align="left" label="超标率" prop="exceedRate" v-if="checkedColumns.includes('超标率')">
          <template #default="scope">
            <span>{{ scope.row.exceedRate }}%</span>
          </template>
        </el-table-column>
        <el-table-column align="left" fixed="right" label="操作" min-width="90" v-if="checkedColumns.includes('操作')">
          <template #default="scope">
            <el-button type="primary" link @click="openCb(scope.row.unitId)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev, pager, next"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <el-drawer v-model="dialog3" :size="1300" :before-close="handleClose3" :show-close="false" class="renyuan-drawer">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">办公用房详情</span>
          <div>
            <el-button @click="dialog3 = false">取消</el-button>
          </div>
        </div>
      </template>
      <div class="title">各类型用房超标情况分析统计表</div>
      <el-table :data="cbData">
        <el-table-column align="left" label="用房类型" prop="roomType"></el-table-column>
        <el-table-column align="left" label="实际使用面积" prop="realArea"></el-table-column>
        <el-table-column align="left" label="核定面积" prop="approveArea"></el-table-column>
        <el-table-column align="left" label="超标面积" prop="exceedArea"></el-table-column>
      </el-table>
      <div style="margin: 26px 0 6px 0;">超标原因： </div>
      <el-input :value="cbData[0]?.notes || ''" type="textarea" :rows="8" disabled></el-input>
    </el-drawer>
  </div>
</template>
<script setup>
import {
  exceedStatist,
  exceedStatistTotal,
  getRegionList,
  unitRoomExceed
} from '@/api/unit'
import ExportExcel from '@/components/exportExcel/exportExcel.vue'
import { reactive, ref, onMounted } from 'vue'
import { useAppStore } from "@/pinia";
import { useUserStore } from '@/pinia/modules/user'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'

// 通过该函数，可以获取组件当前所在的表单项formItem
const { formItem } = useFormItem()

defineOptions({
  name: 'Yygl'
})
const appStore = useAppStore()
const activeName = ref('1')
const searchInfo = ref({
  regionId: '',
  roomTypeInt: 5,
  exceed: 0,
  unitName: ''
})
const cbList = ref([
{
    name: '不限',
    id: 0
  },
  {
    name: '超标',
    id: 1
  },
  {
    name: '不超标',
    id: 2
  }
])
const userStore = useUserStore()
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const dialogFormVisible = ref(false)

const yyglForm = ref(null)

const checkedColumns = ref(['序号', '单位名称', '办公室用房使用面积', '核定办公室用房使用面积','超标面积', '超标率', '操作'])

if (localStorage.getItem('columnData') && JSON.parse(localStorage.getItem('columnData')).bgscb) {
  checkedColumns.value = JSON.parse(localStorage.getItem('columnData')).bgscb
}
const columns = ref(['序号', '单位名称','办公室用房使用面积','核定办公室用房使用面积','超标面积', '超标率', '操作'])
const handleColumnsChange = (val) => {
  let obj = {

  }
  if (localStorage.getItem('columnData')) {
    obj = JSON.parse(localStorage.getItem('columnData'))
  }
  obj.bgscb = val
  localStorage.setItem('columnData', JSON.stringify(obj))
}

const tableData = ref([])
// 查询
const getTableData = async () => {
  const res = await exceedStatist({
    pageNumber: page.value,
    pageSize: pageSize.value,
    ...searchInfo.value
  })
  if (res.code == 200) {
    tableData.value = res.result.data
    total.value = res.result.total
  }
}
getTableData()
function tabChange(val) {
  getTableData()
}
const areaList = ref([])
const yfInfo = ref({})
onMounted(() => {
  getRegionList().then(res => {
    areaList.value = res.result
  })
  exceedStatistTotal().then(res => {
    yfInfo.value = res.result
  })
})
const props1 = {
  checkStrictly: true,
  label: 'name',
  value: 'id'
}
const searchPids = ref([])
const onSubmit = () => {
  page.value = 1
  getTableData()
}
const onReset = () => {
  searchInfo.value = {
    regionId: '',
    roomTypeInt: 5,
    exceed: 0,
    unitName: ''
  }
  searchPids.value = []
  getTableData()
}
const searchAreaChange = (val) => {
  searchInfo.value.regionId = val[val.length - 1]
}

const dialog3 = ref(false)
const cbData = ref([])
function openCb(unitId) {
  unitRoomExceed(unitId).then(res => {
    cbData.value = res.result
    dialog3.value = true
  })
}
const handleClose3 = (done) => {
  dialog3.value = false
}
</script>

<style lang="scss">
.gva-btn-list {
  display: flex;
  justify-content: space-between;
}

.ant-alert-info {
  display: flex;
  justify-content: end;
  align-items: center;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  color: #1890ff;
  padding: 5px;

  .anticon {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
.title {
      font-weight: bold;
      font-size: 20px;
      text-align: center;
    }
</style>
